<template>
  <div class="container">
    <view class="user-info flex">
      <uv-avatar :src="item.avatar" size="43"></uv-avatar>
      <view class="wrap">
        <view class="flex alignCenter">
          <text class="bold fz14">{{item.nickname}}</text>
          <view class="sex flex fz12 alignCenter" :style="sexStyle">
            <view>
              <uv-icon name="man" color="#fff"></uv-icon>
            </view>
            <!-- {{item.age}} -->
          </view>
        </view>
        <view class="desc fz12">{{item.ageYear}}·{{item.industry}}·{{item.homeEconomize}}·{{item.city}}</view>
        <view class="intro fz14">{{item.textContent}}</view>
        <view class="imgs">
          <showImages v-model="item.imageContent"></showImages>
        </view>
        <view class="flex alignCenter justifyBetween other">
          <view class="createTime fz12">{{item.createDate}}</view>
          <view class="flex alignCenter justifyEnd">
            <view class="like flex justifyCenter alignCenter fz14">
              <view class="icon" @click="likeFunc(item,1)">
                <image v-if="item.hasLiked==0" src="https://oss.seenlove.com/images/7a4cecf3a3f076442068d0cdb3e5c67c.png" mode="widthFix" />
                <image v-else src="https://oss.seenlove.com/images/208088cab7ca72a7632d2b3eaf842c37.png" mode="widthFix" />
              </view>
              {{item.likeCount||'点赞'}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="tips fz12">良言一句三冬暖，恶语伤人六月寒</view>
    <view class="comment">
      <view class="title fz14 bold flex alignCenter justifyBetween">全部评论({{list.length}})
        <view class="tabs flex">
          <view class="tab" @click="tabClick(i)" :class="{active:i==current}" v-for="(e,i) in tabs" :key="i">{{e.name}}</view>
        </view>
      </view>

      <view class="user-info flex" v-for="(ele, index) in list" :key="index" @click="comClick(ele)">
        <uv-avatar :src="item.avatar" size="43"></uv-avatar>
        <view class="wrap">
          <view class="flex alignCenter">
            <text class="bold fz14">{{ele.nickname}}</text>
          </view>
          <view class="desc fz12">{{ele.ageYear}}·{{ele.industry}}·{{ele.homeEconomize}}·{{ele.city}}</view>
          <view class="intro fz14">{{ele.content}}</view>
          <view class="flex alignCenter justifyBetween other">
            <view class="createTime fz12">{{ele.createDate}}</view>
            <view class="like flex justifyCenter alignCenter fz14">
              <view class="icon" @click="likeFunc(ele)">
                <image v-if="ele.hasLiked==0" src="https://oss.seenlove.com/images/7a4cecf3a3f076442068d0cdb3e5c67c.png" mode="widthFix" />
                <image v-else src="https://oss.seenlove.com/images/208088cab7ca72a7632d2b3eaf842c37.png" mode="widthFix" />
              </view>
              {{ele.likeCount}}
            </view>
          </view>

          <!-- 二级 -->
          <view class="sec flex" v-for="(sec,idx) in ele.replies?ele.replies:[]" :key="idx" @click.stop="comClick(sec)">
            <uv-avatar :src="sec.avatar" size="25"></uv-avatar>
            <view class="wrap">
              <view class="nickname fz14">{{sec.nickname}}
                <text v-if="sec.fromUserId  && (sec.parentId != ele.id)">回复 {{sec.fromNickname}}</text>
              </view>
              <view class="desc fz12">{{sec.ageYear}}·{{sec.industry}}·{{sec.homeEconomize}}·{{sec.city}}</view>
              <view class="intro fz14">{{sec.content}}</view>
              <view class="flex alignCenter justifyBetween other">
                <view class="createTime fz12">{{sec.createDate}}</view>
                <view class="like flex justifyCenter alignCenter fz14">
                  <view class="icon" @click="likeFunc(sec)">
                    <image v-if="sec.hasLiked==0" src="https://oss.seenlove.com/images/7a4cecf3a3f076442068d0cdb3e5c67c.png" mode="widthFix" />
                    <image v-else src="https://oss.seenlove.com/images/208088cab7ca72a7632d2b3eaf842c37.png" mode="widthFix" />
                  </view>
                  {{sec.likeCount}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="actionBtn">
      <uv-input :focus="focus" @confirm="send" @blur="blur" :customStyle="customStyle" :placeholder="placeholder_format()" border="none" v-model="commentParams.comment">
        <template v-slot:suffix>
          <uv-button @click="send" :customTextStyle="customTextStyle" :custom-style="sendStyle" :loading="loading" text="发送" size="mini" :color="proxy.$config.mainColor"></uv-button>
        </template>
      </uv-input>
    </view>
  </div>
</template>

<script setup lang="ts">
import showImages from "@/components/main/showImages.vue";
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const instance = getCurrentInstance();

let item = ref({});
let id;
let params = {
  movementId: "",
  page: 1,
  pageSize: 10,
  sort: "desc",
};
let current = ref(0);
let list = ref([]); //评论
let tabs = ref([
  { name: "最新", value: "desc" },
  { name: "最早", value: "asc" },
]); //标签
let commentParams = ref({
  movementId: "",
  parentId: "",
  comment: "",
});
let sendStyle = ref({
  height: "30px",
  padding: "5px 0",
});
let customTextStyle = ref({
  fontSize: "13px",
});
let totalPages = 0;
let loading = ref(false);
let customStyle = ref({
  background: "#F2F2F2",
  padding: "5px 15px",
});
let focus = ref(false);
let replyNickname = "";

let sexStyle = computed(() => {
  return {
    background: item.value.sex === "男" ? "#44C0FB" : "#FF67A6",
  };
});

onLoad((e) => {
  id = e.id;
  params.movementId = e.id;
  getComment();
});

onShow(() => {
  getInfo();
  uni.setNavigationBarColor({
    frontColor: "#000000", //文字颜色
    backgroundColor: "#ffffff", //底部背景色
  });
  //send();
});

function placeholder_format() {
  if (replyNickname) {
    return `回复：${replyNickname}`;
  } else {
    return "我来说两句...";
  }
}

function tabClick(index) {
  current.value = index;
  params.sort = tabs.value[index].value;
  list.value = [];
  params.page = 1;
  getComment();
}

function comClick(ele) {
  commentParams.value.parentId = ele.id;
  replyNickname = ele.nickname;
  focus.value = true;
}

function blur() {
  replyNickname = "";
  focus.value = false;
}

async function getComment() {
  let resp = await proxy.$apis.comments(params);
  let arr = [...list.value];
  if (resp.records.length) {
    arr = proxy.$utils.filterArr([...arr], resp.records, "id");
  }
  list.value = arr;
  totalPages = resp.totalPages;
  console.log("评论", list.value);
}

async function getInfo() {
  item.value = await proxy.$apis.movementsDetails(id);
  console.log("详情", item.value);
}

async function likeFunc(item, type?) {
  if (type) {
    await counter.toLike(item.hasLiked, item.id, type);
  } else {
    await counter.toLike(item.hasLiked, item.id);
  }
  if (item.hasLiked) {
    proxy.$utils.showToast("取消点赞成功");
  } else {
    proxy.$utils.showToast("点赞成功");
  }
  getInfo();
  getComment();
}

let send = async () => {
  try {
    loading.value = true;
    commentParams.value.movementId = id;
    await proxy.$apis.sendComments(commentParams.value);
    proxy.$utils.showToast("评论成功");
    getComment();
  } catch (error) {
    console.log("啥问题", error);
  } finally {
    replyNickname = "";
    commentParams.value = {
      movementId: "",
      parentId: "",
      comment: "",
    };
    loading.value = false;
    focus.value = false;
  }
};
</script>



<style lang="scss" scoped>
.container {
  padding-bottom: 100px;
  .user-info {
    padding: 15px;
    .wrap {
      margin-left: 10px;
      width: 100%;
      .sex {
        color: white;
        background-color: #ff67a6;
        border-radius: 11px;
        padding: 3px;
        margin-left: 13px;
      }
      .desc {
        color: #999999;
        padding: 3px 0 10px;
      }
      .intro {
        color: #333;
      }
      .imgs {
        grid-template-columns: repeat(3, minmax(0px, 1fr));
        /* #ifdef MP-WEIXIN*/
        gap: 5px 5px; //上下间距 左右间距
        /* #endif */

        /* #ifdef H5*/
        gap: 0 5px; //上下间距 左右间距
        /* #endif */
        margin-top: 10px;
        .img {
          aspect-ratio: 1/1;
          image {
            height: 100%;
            border-radius: 5px;
          }
        }
      }
      .other {
        margin-top: 10px;
        .createTime {
          color: #999999;
        }
        .like {
          color: #999999;
          .icon {
            width: 18px;
            margin-right: 6px;
            image {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
        .message {
          margin-left: 10px;
          color: #999999;
        }
      }
    }
  }
  .tips {
    color: #999999;
    padding: 6px 16px;
    background-color: #f0f0f0;
  }
  .comment {
    .title {
      padding: 15px;
      .tabs {
        .active {
          color: #000000 !important;
        }
        .tab {
          color: #999999;
          font-size: 12px;
          font-weight: inherit;
          margin-left: 10px;
        }
      }
    }
    .user-info {
      .desc {
        padding: 2px 0;
      }
      .other {
        margin-top: 2px;
      }
      .sec {
        margin-top: 10px;
        .intro {
          color: #333;
        }
      }
    }
  }
  .actionBtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px 15px 25px 15px;
    background: white;
    z-index: 1;
  }
}
</style>
